<template>
<div class="xyt-talk-message">
  <xytDialog ref="xytDialogRef" position="center" @close="closeDialog">
    <img class="xyt-dialog-bg" src="../../assets/img/dialog-bg.png" alt="">
    <dib class="xyt-talk-message-box">
      <img class="bg" src="../../assets/img/fj-decorate.png" alt="">
      <div class="xyt-talk-box">
        <div class="content">{{ plane.content }}</div>
      </div>
      <XytBtn @click="replay">回复</XytBtn>
    </dib>
  </xytDialog>
</div>
</template>
<script setup>
import { ref, defineEmits, reactive } from 'vue';
import xytDialog from '../common/dialog/xytDialog.vue'
import XytBtn from '../common/XytBtn.vue';
import { capPerponPaperPlan } from './../../api/fly.js'
import { useRoute } from 'vue-router'

const route = useRoute()
let plane = reactive({
  paper_plane_id: '',
  content: ''
})
let talkFrom = ref(1)
async function open(params) {
  if (params) {
    plane.paper_plane_id = params.paper_plane_id
    plane.content = params.content
  } else {
    const res = await capPerponPaperPlan({
      paper_plane_id: sessionStorage.getItem("paperPlaneId")
    })
    plane.paper_plane_id = res.result.paper_plane_id
    plane.content = res.result.content
  }
  xytDialogRef.value.open()
}
const xytDialogRef = ref(null)
defineExpose({
  open
})
const emit = defineEmits(['close', 'replay'])
function closeDialog() {
  emit('close')
}
function replay() {
  xytDialogRef.value.close()
  emit('replay', plane)
}
</script>
<style scoped lang="scss">

.xyt-talk-box {
  position: absolute;
  left: 22px;
  top: 25%;
  bottom: 110px;
  right: 22px;
  padding: 8px;
  background: #FAFAFA;
  box-shadow: inset 0px 1px 6px 0px rgba(118, 158, 226, 0.14);
  border-radius: 8px;
  overflow: auto;
  .content {
    position: relative;
  }
}
.xyt-dialog-bg {
  position: relative;
  width: 100%;
}
.xyt-talk-message-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 25% 22px 0 22px;
  .bg {
    position: absolute;
    left: 22px;
    top: 20%;
    width: 30px;
    z-index: 99;
  }
  .xyt-btn {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 40px;
  }
}
</style>